/* [变量] */
$namespcae: "wyn" !default; // wyn 表示这个名称开头，!default 表示使用这个默认值
$block-sel: "-" !default;
$element-sel: "__" !default;
$mod-sel: "--" !default;

/* BEM 架构的 B */
@mixin b($block) {
  $B: #{$namespcae + $block-sel + $block}; // 样式名生成规则：wyn-'传入的样式名'

  .#{$B} {
    @content; // 占位符，用于插入样式（类似 Vue 插槽）。
  }
}

/* BEM 架构的 E */
@mixin e($element) {
  $selector: &; // 父样式类名

  // @at-root 表示样式不被嵌套编译
  @at-root {
    #{$selector + $element-sel + $element} {
      @content; // 占位符，用于插入样式（类似 Vue 插槽）。
    }
  }
}

/* BEM 架构的 M */
@mixin m($m) {
  $selector: &; // 父样式类名

  // @at-root 表示样式不被嵌套编译
  @at-root {
    #{$selector + $mod-sel + $m} {
      @content; // 占位符，用于插入样式（类似 Vue 插槽）。
    }
  }
}

/* [BFC] */
@mixin bfc {
  height: 100%;
  overflow: hidden;
}
